<template>
  <div class="full relative">
    <v-chart 
      ref="echarts"  
      class="" 
      style="width: 100% !important; height: 100% !important;"
      :options="options" 
      autoresize 
      @click="clickMap" 
    />
  </div>
</template>

<script>
import './nmg.js'


export default {
  props: {
    seriesId: null,
    seriesData: []
  },
  data() {
    return {
      id: 1,

      // 种羊场 坐标
      data: [
        {
          longitude: "116.867651",
          latitude: "48.647474",
          address: "内蒙古自治区呼伦贝尔市阿镇区巴音陶日木嘎查",
          name: "阿拉坦额莫勒镇额日和图种羊基地",
          townName: "阿拉坦额莫勒镇",
          villageName: "区巴音陶日木嘎查"
        },
      ],

      userList: [
        {
          id:32,
          avatar:"http://xmy.5mus.com/public/uploads/20240925/6065835ebaf94fa0bb0197f8b7958635_苏雅拉达来-13948876686.jpg",
          name:"苏雅达来",
          phone:"13948876686",
          longitude:"116.792005",
          latitude:"48.690669",
          townId:"150727100000", townName:"阿拉坦额莫勒镇",
          villageId:"150727100001", villageName:"贝尔社区"
        },
        {
          id:158,
          avatar:"http://xmy.5mus.com/public/uploads/20240924/234350f891b340cea62d665afb65bdd0_浩斯巴雅尔+15049433589.jpg",
          nickName:"浩斯巴雅尔",
          phone:"15049433589",
          longitude:"116.983926",
          latitude:"48.381658",
          townId:"150727100000", townName:"阿拉坦额莫勒镇",
          villageId:"150727100004", villageName:"呼伦社区"
        },
        {
          id: 36,
          avatar: "http://xmy.5mus.com/public/uploads/20240924/7ca90e156920422286d987f83bfd657a_敖云孟都+13847717428.jpg",
          name: "敖云孟都",
          phone: "13847717428",
          longitude:"116.983926",
          latitude:"48.181658",
          townId:"150727100000", townName:"阿拉坦额莫勒镇",
          villageId:"150727100004", villageName:"呼伦社区"
        },
        {
          id: 34,
          avatar: "http://xmy.5mus.com/public/uploads/20240924/549ff3eb27ae4e508e9eebb01e7196c3_浩斯巴雅尔+18347746433.jpg",
          name: "浩斯巴雅尔",
          phone: "18347746433",
          longitude: "116.904349",
          latitude: "49.482517",
          townId: "150727102000", townName: "呼伦镇",
          villageId: "150727102001", villageName: "呼伦艾里社区"
        },
        {
          id: 173,
          avatar: "http://xmy.5mus.com/public/uploads/20240924/6c743621d3b34451a9fc1cf031abb803_同嘎拉格+13384807049.jpg",
          name: "嘎拉格",
          phone: "13384807049",
          longitude: "117.104349",
          latitude: "49.482517",
          townId: "150727102000", townName: "呼伦镇",
          villageId: "150727102001", villageName: "呼伦艾里社区"
        },
        {
          id: 268,
          avatar: "http://xmy.5mus.com/public/uploads/20240924/ba6075dd14c749c397932c644a9cb35b_达来.jpg",
          name: "阿拉腾达来",
          phone: "13847743634",
          longitude: "116.876263",
          latitude: "48.928971",
          townId: "150727202000", townName: "达赉苏木",
          villageId: "150727202201", villageName: "阿尔山布拉格嘎查"
        },
        {
          id: 42,
          avatar: "http://xmy.5mus.com/public/uploads/20240725/5609f2faf655435bb565a099fcd56e48_哈斯额尔德木图-13848549708.jpg",
          name: "哈斯额尔德木图",
          phone: "13848549708",
          longitude: "116.476263",
          latitude: "49.228971",
          townId: "150727202000", townName: "达赉苏木",
          villageId: "150727202201", villageName: "阿尔山布拉格嘎查"
        },
        {
          id: 266,
          avatar: null,
          name: "那仁满都呼",
          phone: "15847301868",
          longitude: "116.776263",
          latitude: "49.128971",
          townId: "150727202000", townName: "达赉苏木",
          villageId: "150727202201", villageName: "阿尔山布拉格嘎查"
        },
        {
          id: 38,
          avatar: "http://xmy.5mus.com/public/uploads/20240725/354066c206a84cbb8b9713fe119a9d81_乌宁呼-13847702784.jpg",
          name: "乌宁夫",
          phone: "13847702784",
          longitude: "116.295035",
          latitude: "48.523887",
          townId: "150727101000", townName: "阿日哈沙特镇",
          villageId: "150727101001", villageName: "满都拉社区"
        },
        {
          id: 152,
          avatar: "http://xmy.5mus.com/public/uploads/20240725/98ec2e20beb245f6b83a6b3c0285f25f_照日格图-13848673327.jpg",
          name: "照日格图",
          phone: "13848673327",
          longitude: "115.995035",
          latitude: "48.623887",
          townId: "150727101000", townName: "阿日哈沙特镇",
          villageId: "150727101001", villageName: "满都拉社区"
        },
        {
          id: 293,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/feb26a33fb194ca18fd0274f4b7f944d_阿拉藤格日乐-13947703290.jpg",
          name: "阿拉藤格日乐",
          phone: "13947703290",
          longitude: "116.195035",
          latitude: "48.423887",
          townId: "150727101000", townName: "阿日哈沙特镇",
          villageId: "150727101001", villageName: "满都拉社区"
        },
        {
          id: 292,
          avatar: null,
          name: "乌日图那顺",
          phone: "15049496815",
          longitude: "116.195035",
          latitude: "48.823887",
          townId: "150727101000", townName: "阿日哈沙特镇",
          villageId: "150727101001", villageName: "满都拉社区"
        },
        {
          id: 275,
          avatar: "http://xmy.5mus.com/public/uploads/20240723/8f82a7fcbdde44b4835b9bdc018fc542_af096fe0-8e99-4cb2-aeba-8af6936bfb23.jpg",
          name: "乌力吉",
          phone: "13624871436",
          longitude: "115.669527",
          latitude: "48.102841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 291,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/e225af9a712c441c803fecf8a25cf826_布和巴雅尔-13947379322.jpg",
          name: "布和巴雅尔",
          phone: "13947379322",
          longitude: "115.769527",
          latitude: "48.052841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 290,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/8605ba8636e449428fc7ccb5f8c3ca67_林呼娃-15047365983.jpg",
          name: "莲花",
          phone: "13514772978",
          longitude: "115.869527",
          latitude: "47.852841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 273,
          avatar: "http://xmy.5mus.com/public/uploads/20240724/dc85ca2cfba54bfc837d3369d4fdd306_嘎拉藏-.jpg",
          name: "嘎拉藏",
          phone: "13947742137",
          longitude: "116.269527",
          latitude: "48.152841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 30,
          avatar: "http://xmy.5mus.com/public/uploads/20240725/54b66ca0083845e487cab4eb2f07ca2d_王世华-13947782600.jpg",
          name: "王世华",
          phone: "13947782600",
          longitude: "116.469527",
          latitude: "48.252841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 289,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/de1aff48da204286b6eb3b8c4069ddd8_胡雅图-15947073897.jpg",
          name: "胡雅图",
          longitude: "116.469527",
          latitude: "48.052841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 288,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/d2cb87cfdeea43419ad312308b88d522_宝音达来-15134843705.jpg",
          name: "宝音达来",
          phone: "15134843705",
          longitude: "116.109527",
          latitude: "48.052841",
          townId: "150727201000", townName: "克尔伦苏木",
          villageId: "150727201200", villageName: "克尔伦嘎查"
        },
        {
          id: 287,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/f2eda961b1f44d598718508ea9ff9020_温都苏-13704774561.jpg",
          name: "温都苏",
          phone: "13704774561",
          longitude: "117.164307",
          latitude: "48.202061",
          townId: "150727203000", townName: "宝格德乌拉苏木",
          villageId: "150727203202", villageName: "哈如勒嘎查"
        },
        {
          id: 286,
          avatar: "http://xmy.5mus.com/public/uploads/20240729/a0d5e300f9974230923a9dc84103fe13_热瓦迪-15847476676.jpg",
          name: "热瓦迪",
          phone: "15847476676",
          longitude: "117.164307",
          latitude: "48.402061",
          townId: "150727203000", townName: "宝格德乌拉苏木",
          villageId: "150727203202", villageName: "哈如勒嘎查"
        },
        {
          id: 285,
          avatar: "http://xmy.5mus.com/public/uploads/20240924/646225bc87ea445b8f06a4ec7de4a3e0_宝音伊布格乐.jpg",
          name: "宝音伊布格乐",
          phone: "15849796473",
          longitude: "117.464307",
          latitude: "48.602061",
          townId: "150727203000", townName: "宝格德乌拉苏木",
          villageId: "150727203202", villageName: "哈如勒嘎查"
        },
        {
          id: 284,
          avatar: "http://xmy.5mus.com/public/uploads/20240924/683eb35215ea4e068dd95a6d1e7445d2_哈斯其劳+13514772967.jpg",
          name: "哈斯其劳",
          phone: "13514772967",
          longitude: "117.464307",
          latitude: "48.402061",
          townId: "150727203000", townName: "宝格德乌拉苏木",
          villageId: "150727203202", villageName: "哈如勒嘎查"
        },
        {
          id: 157,
          avatar: "http://xmy.5mus.com/public/uploads/20240725/06df72f8e3ed4409816adba2e3b9aa2b_青克乐-15894958044.jpg",
          name: "青克乐",
          phone: "15894958044",
          longitude: "117.264307",
          latitude: "48.002061",
          townId: "150727200000", townName: "贝尔苏木",
          villageId: "150727200202", villageName: "莫能塔拉嘎查"
        },
        {
          id: 267,
          avatar: null,
          name: "苏雅拉达来",
          phone: "15047768099",
          ongitude: "117.633438",
          latitude: "48.16515",
          townId: "150727200000", townName: "贝尔苏木",
          villageId: "150727200202", villageName: "莫能塔拉嘎查"
        },
        {
          id: 282,
          avatar: null,
          name: "斯庆格日乐",
          phone: "13947755664",
          ongitude: "117.316085",
          latitude: "48.100493",
          townId: "150727200000", townName: "贝尔苏木",
          villageId: "150727200202", villageName: "莫能塔拉嘎查"
        }
      ],

      geoCoordMap: {},

      options: {
        showLegendSymbol: true,
        tooltip: {
          show: false,
          trigger: 'item',
          textStyle: {
            fontSize: 10,
            lineHeight: 22,
          },
          position: point => {
            return [point[0] + 50, point[1] - 20];
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          show: false,
          seriesIndex: 0,
          // 地图区域 颜色
          inRange: {
            color: ['rgb(31, 106, 219)', 'rgb(37, 72, 124)'],
          },
        },
        // 底部背景
        geo: {
          show: true,
          // aspectScale: 1, //长宽比
          zoom: 1.2,
          top: '10%',
          left: '10%',
          map: 'nmg',
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#fff',
              shadowOffsetX: 9,
              shadowOffsetY: 9,
              shadowColor: "#eee",
              shadowBlur: 20,
            },
            emphasis: {
              areaColor: '#888',
            },
          },
        },
        series: []
      },
    };
  },
  watch: {
    seriesData: {
      handler(newVal) {
        this.initOptions(newVal)
        
        // 重新选择区域
        // this.handleMapRandomSelect();
      }, 
      immediate: true,
      deep: true,
    },
  },
  mounted() {
  
  },
  methods: {
    initOptions(val) {
      let that = this;

      this.options.series = [
        {
          name: '相关指数',
          type: 'map',
          // aspectScale: 1, //长宽比
          zoom: 1.2,
          mapType: 'nmg',      // 自定义扩展图表类型
          roam: false,              // 开启 缩放
          top: '10%',
          left: '10%',
          itemStyle: {
            normal: {
              color: 'red',
              areaColor: 'rgb(86, 162, 227)',
              borderColor: '#eee',
              borderWidth: 1,
              shadowBlur: 7,
              shadowColor: '#eee',
            },

            // 鼠标经过颜色
            emphasis: {
              areaColor: '#eee',
              borderColor: '#888',
              borderWidth: 2,
              shadowBlur: 10,
              shadowColor: '#888',
            },
          },
          label: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: '#efefef',
            },
            emphasis: {
              textStyle: {
                color: '#000',
              },
            },
          },
          // data: newData,
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbolSize: 20,
          effectType: 'ripple',
          legendHoverLink: false,
          showEffectOn: 'render',
          rippleEffect: {
            period: 2,
            scale: 5,
            brushType: 'stroke',
          },
          label: {
            show: false,
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          zlevel: 1,
          itemStyle: {
            color: '#9bcc6f',
            shadowBlur: 5,
            shadowColor: '#fff',
          },
          emphasis: {
            label: {
              show: true,
              color: '#9bcc6f',
              fontSize: 12,
              position: 'top',
              formatter(value) {
                return `${value.name}`
              }
            },
          },
          // data: that.converZhongYangChangtData(that.data),
          data: [],
        },
        {
          // id: this.seriesId,
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin',
          symbolSize: 30,
          itemStyle: {
            color: 'rgb(198, 48, 48)', //标志颜色
          },
          emphasis: {
            label: {
              show: true,
              color: 'rgb(198, 48, 48)',
              fontSize: 12,
              position: 'top',
              formatter(value) {
                return `${value.name}`
              }
            },
          },
          // label: {
          //   show: true,
          //   color: '#fff',
          //   fontSize: 15,
          //   position: 'inside',
          //   formatter(value) {
          //     return `${value.value[2]}`
          //   }
          // },
          // data: that.convertData(that.userList),
          data: [],
          zlevel: 1,
          universalTransition: {
            enabled: true,
          }
        }
      ]
    },

    converZhongYangChangtData(data) {
      let point = [];
      for (var i = 0; i < data.length; i++) {
        point.push({
          name: data[i].name,
          value: [data[i].longitude, data[i].latitude, data[i].name],
        });
      }
      return point;
    },
  
    convertData(data) {
      let userPoint = [];
      for (var i = 0; i < data.length; i++) {
        userPoint.push({
          name: data[i].name,
          muHuId: data[i].id,
          townId: data[i].townId,
          townName: data[i].townName,
          villageId: data[i].villageId,
          villageName: data[i].villageName,
          scatterType: 'muHu',
          value: [data[i].longitude, data[i].latitude, data[i].name],
        });
      }
      return userPoint;
    },

    // 开启定时器
    startInterval() {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },

    // 重新随机选中地图区域
    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          let index = Math.floor(Math.random() * length);
          while (index === this.preSelectMapIndex || index >= length) {
            index = Math.floor(Math.random() * length);
          }
          map.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          map.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
          });
          map.dispatchAction({
            type: 'mapSelect',
            seriesIndex: 0,
            dataIndex: index,
          });
          this.preSelectMapIndex = index;
        } catch (error) {
          console.log(error)
        }
      });
    },

    // 重新选择区域
    handleMapRandomSelect() {
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          const _self = this;

          setTimeout(() => {
            _self.reSelectMapRandomArea();
          }, 0);

          // 移入区域，清除定时器、取消之前选中并选中当前
          map.on('mouseover', function (params) {
            clearInterval(_self.intervalId);
            map.dispatchAction({
              type: 'mapUnSelect',
              seriesIndex: 0,
              dataIndex: _self.preSelectMapIndex,
            });
            map.dispatchAction({
              type: 'mapSelect',
              seriesIndex: 0,
              dataIndex: params.dataIndex,
            });
            _self.preSelectMapIndex = params.dataIndex;
          });
          // 移出区域重新随机选中地图区域，并开启定时器
          map.on('globalout', function () {
            _self.reSelectMapRandomArea();
            _self.startInterval();
          });
          this.startInterval();
        } catch (error) {
          console.log(error)
        }
      });
    },

    // 点击 地图上的 旗县 标记
    clickMap(e) {
      // 跳转到牧户
      if (e.componentSubType == 'scatter') {
        let muHuId = this.userList[e.dataIndex].id
        let muHuName = this.userList[e.dataIndex].name
        let phone = this.userList[e.dataIndex].phone
        let townId = this.userList[e.dataIndex].townId
        let townName = this.userList[e.dataIndex].townName
        let villageId = this.userList[e.dataIndex].villageId
        let villageName = this.userList[e.dataIndex].villageName
        this.$router.push(`/muHuPage/${townId}/${townName}/${villageId}/${villageName}/${muHuId}/${muHuName}/${phone}`)
      
      // 跳转到 旗县地图
      } else if (e.componentSubType == 'map') {
        this.$emit('clickMap', e.name)
      // 点击涟漪
      } else if (e.componentSubType == 'effectScatter') {
        this.$router.push(`/zhongYangChang/1780420223883542528/阿拉坦额莫勒镇额日和图种羊基地`)
      }
    }
  },
};
</script>

<style>
  .color { color: rgb(65, 155, 239); }

  .s { color: rgb(198, 48, 48); }
</style>
